<template>
    <div class="table-box">
        <div class="table-search">
            <div class="btn-box">
                <el-button type="primary" @click="onAdd">新增</el-button>
                <el-button type="primary" plain @click="onExport">导出</el-button>
            </div>
        </div>
        <div class="card content-box">
            <div class="table">
                <el-table :data="tableData" border v-loading="loading">
                    <el-table-column prop="id" label="自增ID" align="center" />
                    <el-table-column prop="client_type" label="设备类型" align="center" />
                    <el-table-column prop="client_version" label="app版本号" align="center" />
                    <el-table-column prop="is_required" label="是否强更" align="center" :formatter="formatIsRequired"/>
                    <el-table-column prop="client_code" label="app code" align="center" />
                    <el-table-column prop="app_link" label="下载链接" align="center" />
                    <el-table-column prop="update_note" label="更新内容" align="center" />
                    <el-table-column prop="app_mark" label="app标识" align="center" />
                    <el-table-column prop="app_name" label="APP名称" align="center" />
                    <el-table-column prop="createtime" label="创建时间" align="center" :formatter="formatterTime" />
                    <!-- <el-table-column prop="createtime" label="创建时间" align="center" />> -->

                    <el-table-column label="操作" align="center" fixed="right" width="200">
                        <template #default="scope">
                            <el-button type="primary" plain
                                @click="handleOperate(scope.$index, scope.row, 'edit')">更新</el-button>
                            <el-button type="danger"
                                @click="handleOperate(scope.$index, scope.row, 'delete')">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="table-pagination">
                    <el-pagination :current-page="pageable.pageNum" :page-size="pageable.pageSize"
                        :page-sizes="[10, 25, 50, 100]" :background="true" layout="total, sizes, prev, pager, next, jumper"
                        :total="pageable.total" @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"></el-pagination>
                </div>
            </div>
        </div>
        <DialogForm @cancel="cancel" @closeDialog="closeDialog" @submitForm="submit" :dialogFormVisible="dialogVisible"
            :dialogForm="dialogForm" :btnLoading="btnLoading" />
    </div>
</template>
<script setup>
import { ref, onMounted, reactive } from "vue";
import { exportToExcel, formatterTime } from "@/utils/utils";
import {
    appversionListApi, appversionAddApi, appversionUpdateApi, appversionDeleteApi
} from "@/api/slotsgame/upgrade/upgrade";
import DialogForm from "./components/dialogForm.vue";
const loading = ref(false);
const tableData = ref([]);
const btnLoading = ref(false);
const dialogVisible = ref(false);
const btnType = ref(null);
const pageable = reactive({
    pageNum: 1,
    pageSize: 10,
    // total: 0
});
const formatIsRequired = (row) => {
  return row.is_required === 1 ? '是' : '否';
};

const is_requiredList = [
    {type :1, name:"是"},
    {type:0, name:"否"}
]
const dialogFormData = {
    id: "",
    // name: "",
    // description: "",
    // amount: "",
    // ios_price: "",
    // android_price: "",
    app_mark: "",
    // goods_id: "",
    // price: "",
    // show_price: "",
    // currency: "",
    // currency_symbol: "",
    // show_currency: "",
    // show_symbol: "",
    // rank: ""
};
const dialogForm = reactive({ ...dialogFormData });
// 参数
const param = () => {
    return {
        page: pageable.pageNum,
        pageSize: pageable.pageSize
    };
};

// 获取表格数据
const getTbaleData = async () => {
    loading.value = true;

    try {
        const res = await appversionListApi(param());
        loading.value = false;
        tableData.value = res.data.results;
        pageable.total = res.data.count;
    } catch (error) {
        loading.value = false;
    }
};

// 查询
const onAdd = async () => {
    dialogVisible.value = true;
    btnType.value = "add";
};
// 导出
const onExport = async () => {
    const data = Object.assign(param(), { export: 1 });
    const res = await appversionListApi(data);

    let head = {
        id: "自增ID",
        client_type: "设备类型",
        client_version: "app版本号",
        is_required: "是否强更",
        client_code: "	app code",
        app_link: "下载链接",
        update_note: "更新内容",
        app_mark: "app标识",
        createtime: "创建时间",
    };
    exportToExcel(res.data.results, head, "Slotsgame-商品列表");
};
//关闭
const closeDialog = () => {
    dialogVisible.value = false;
    btnType.value = null;
    Object.assign(dialogForm, dialogFormData);
};

// 取消
const cancel = () => {
    dialogVisible.value = false;
    btnType.value = null;
    Object.assign(dialogForm, dialogFormData);
};
// 提交
const submit = async param => {
    try {
        btnLoading.value = true;
        if (btnType.value == "add") {
            delete param.id;
            const res = await appversionAddApi(param);
            ElMessage({
                message: res.message,
                type: "success"
            });
        }
        if (btnType.value == "edit") {
            const res = await appversionUpdateApi(param);
            ElMessage({
                message: res.message,
                type: "success"
            });
        }
        dialogVisible.value = false;
        btnLoading.value = false;
        getTbaleData();
    } catch (error) {
        btnLoading.value = false;
        dialogVisible.value = false;
    }
};
const handleOperate = async (index, row, type) => {
    // 编辑
    if (type === "edit") {
        btnType.value = "edit";
        dialogVisible.value = true;
        Object.assign(dialogForm, { ...row });
    }
    // 删除
    if (type === "delete") {
        ElMessageBox.confirm("您是否确认删除此商品?", "温馨提示", {
            type: "warning"
        }).then(async () => {
            const res = await appversionDeleteApi({ id: row.id });
            getTbaleData();
            ElMessage.success(res.message);
        });
    }
};
// 条数
const handleSizeChange = number => {
    pageable.pageSize = number;
    getTbaleData();
};
// 页码
const handleCurrentChange = number => {
    pageable.pageNum = number;
    getTbaleData();
};
onMounted(() => {
    getTbaleData();
});
</script>
  